<x-collapse accordion>
  <x-collapse-panel label="Consistency">
    <div>Consistent with real life: consistent with the flow and logic of real life, following the language and concepts of user habits;</div>
    <div>Consistency in the interface: All elements and structures need to be consistent, such as design styles, ICONS and text, element locations, etc.</div>
  </x-collapse-panel>
  <x-collapse-panel label="Feedback">
    <div>Control feedback: users can clearly perceive their own operation through interface style and interaction effect;</div>
    <div>Page feedback: after the operation, the current state is clearly displayed through the changes of page elements.</div>
  </x-collapse-panel>
  <x-collapse-panel label="Efficiency">
    <div>Simplify the process: design a simple and intuitive operation process;</div>
    <div>Clear and clear: clear language expression and clear meaning, so that users quickly understand and make decisions;</div>
    <div>Help user identification: simple and straightforward interface allows users to quickly identify rather than recall, reducing the burden of user memory.</div>
  </x-collapse-panel>
  <x-collapse-panel label="Controllability">
    <div>User decision: can give user operation Suggestions or safety tips according to the scenario, but can not replace the user to make decisions;</div>
    <div>The results are controllable: the user is free to perform actions, including undo, rollback, and termination of the current operation.</div>
  </x-collapse-panel>
</x-collapse>
